<script>
import BomNav from "../components/BomNav.vue"
import { ref,reactive } from 'vue';
import { useRouter } from 'vue-router';
import { getClass,getGirl,getplic} from "../api/classify"
import { getCatalogueData } from "../api/liber.js";
export default {
    components: {
        BomNav,
    },
    setup() {

        let data = reactive({
            volumeId:null,
        })
        const active = ref(0);
        const index = ref(0);
        let router = useRouter();


        //跳转Search
        let searchFun = () => {
            console.log(router);
            router.push("/search")
        }

        //男版
        let dataList = ref(null);
        getClass().then(data => {
            dataList.value = data.body.categoryList[0].groups
            console.log(dataList.value);

        })

        //女版
        let datagirl = ref(null);
        getGirl().then(data=>{
            datagirl.value = data.body.categoryList[0].groups
            console.log(datagirl.value);
        })

        //出版
        let dataplic = ref(null);
        getplic().then(data=>{
            dataplic.value = data.body.categoryList[0].groups
            console.log(dataplic.value);

            
        })

        let liberFun = (id) => {
      let params = {
        books: id,
        libers: "",
      };
      getCatalogueData(params)
        .then((item) => {
          // console.log(item.data.volumes[0].volumeId);
          console.log(item.data.volumes);
          data.volumeId = item.data.volumes[0].volumeId
          params.libers = item.data.volumes[0].chapters[0].chapterId;
        })
        .then(() => {
          router.push({
            path:"/page",
            query:{
              books:params.books,
              libers: params.libers,
              volumeId:data.volumeId
            }
          });
        });
    };
   

        return {

            active,
            index,
            searchFun,
            dataList,
            datagirl,
            dataplic,
            data,
            liberFun

        };
    },
}
</script>

<template>
    <div class="classify_box">
        <div class="container">
            <div class="classify_top">
                <h1>分类</h1>

                <div class="search" @click="searchFun">
                    <p>天上地下为我独尊</p>
                </div>
            </div>
            <div class="classify_title">
                <van-tabs v-model:active="active" class="title_name">
                    <van-tab title="男生">
                        <div class="content_title">
                            <van-tabs v-model:index="index" scrollspy sticky >
                                <van-tab  v-for="(item, index) in dataList" :key="index" :title="item.name">
                                    <div class="item">
                                        <h5><span></span>{{ item.name }}<span></span></h5>
                                        <div class="content_box" v-if="index!=1 && index!=2 && index!=3" >
                                            <div class="content" @click="liberFun('3377676')" v-for="item in dataList[index].items" :key="item.id">
                                                <div class="image">
                                                    <img :src="item.pics[0]" alt="">
                                                </div>
                                                <p>{{ item.name }}</p>
                                            </div>

                                        </div>

                                        <div class="item_content" v-if="index!=0">
                                            <ul>
                                                <li v-for="item in dataList[index].items" :key="item.id" @click="liberFun('3377676')">{{ item.name }}
                                                </li>

                                            </ul>
                                        </div>

                                    </div>
                                </van-tab>
                            </van-tabs>
                        </div>
                    </van-tab>
                    <van-tab title="女生">
                        <div class="content_title">
                            <van-tabs v-model:index="index" scrollspy sticky>
                                <van-tab v-for="(item,index) in datagirl" :key="index" :title="item.name">
                                    <div class="item">
                                        <h5><span></span>{{ item.name }}<span></span></h5>
                                        <div class="content_box" v-if="index!=1 && index!=2 && index!=3" >
                                            <div class="content" @click="liberFun('3377676')" v-for="item in datagirl[index].items" :key="item.id">
                                                <div class="image">
                                                    <img :src="item.pics[0]" alt="">
                                                </div>
                                                <p>{{ item.name }}</p>
                                            </div>

                                        </div>

                                        <div class="item_content" v-if="index!=0">
                                            <ul>
                                                <li v-for="item in datagirl[index].items" :key="item.id" @click="liberFun('3377676')">{{ item.name }}
                                                </li>

                                            </ul>
                                        </div>

                                    </div>
                                </van-tab>
                            </van-tabs>
                        </div>
                    </van-tab>
                    <van-tab title="出版">
                        <div class="content_title">
                            <van-tabs v-model:index="index" scrollspy sticky>
                                <van-tab v-for="(item,index) in dataplic" :key="index" :title="item.name">
                                    <div class="item">
                                        <h5><span></span>{{ item.name }}<span></span></h5>
                                        <div class="content_box" >
                                            <div class="content" @click="liberFun('3377676')" v-for="item in dataplic[index].items" :key="item.id">
                                                <div class="image">
                                                    <img :src="item.pics[0]" alt="">
                                                </div>
                                                <p>{{ item.name }}</p>
                                            </div>

                                        </div>

                                    </div>
                                </van-tab>
                            </van-tabs>
                        </div>
                    </van-tab>
                </van-tabs>
            </div>
        </div>


    </div>
    <BomNav />
</template>

<style lang="scss" scoped>
.classify_box {
    width: 100%;
    padding-bottom: 80px;

    .container {

        // padding: 0 16px;
        .classify_top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 20px;
            background-color: #fff;
            padding: 0 16px;
            padding-bottom: 10px;


            h1 {
                font-weight: 600;
                font-size: 26px;
            }

            .search {
                text-indent: 14px;
                height: 30px;
                line-height: 30px;
                background: #ececec;
                border-radius: 20px;

                p {
                    box-sizing: border-box;
                    width: 132px;
                    font-size: 12px;
                    padding: 0px 18px;
                    color: #9b9b9b;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
            }

        }

    }
}

::v-deep {
    .classify_title {
        // margin-top: 10px;
        background-color: #fff;

        .van-tab {
            flex: none;
            font-size: 18px;
            font-weight: 600;
            color: #878787;
            margin-right: 30px;
            // padding: 0 16px;
        }

        .van-tabs__wrap {
            padding: 0 16px;
        }

        .van-tabs__line {
            width: 22px;
            background-color: #e76f41;
            height: 4px;
            bottom: 18px;
        }

        .van-tab--active {
            color: #e76f41;
        }

        .content_title {
            .van-tab {
                // padding: 10px 15px;
                flex: none;
                font-size: 14px;
                background-color: #f2f2f2;
                border-radius: 10px;
                margin-right: 0px;
                padding: 0;
                font-weight: 550;
            }

            .van-tabs__line {
                background: none;
            }

            .van-tab__text--ellipsis {
                padding: 8px 23px;
            }

            .van-tabs__nav {
                justify-content: space-between;
            }

            .van-tabs--line .van-tabs__wrap {
                height: 35px;
                padding-top: 15px;
                padding-bottom: 15px;
                background-color: #fff;
            }

            .van-tab--active {
                background-color: #e76f41;
                color: #fff;
            }

            .item {
                padding: 0 16px;

                h5 {
                    padding-top: 10px;
                    padding-bottom: 15px;
                    color: #6c6c6c;
                   text-align: center;
                    font-size: 16px;
                    span{
                        width: 40px;
                        height: 1px;
                        background: linear-gradient(90deg,#ebebeb,#000);
                        display: inline-block;
                        line-height: 10px;
                        margin: 3px 20px;
                        &:nth-child(2){
                            background: linear-gradient(90deg,#000,#ebebeb);
                        }
                    }
                  
                }

                .content_box {
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    flex-wrap: wrap;

                    .content {
                        width: 48%;
                        background-color: #f8f8f8;
                        border-radius: 10px;
                        display: flex;
                        align-items: center;
                        margin-bottom: 12px;

                        .image {
                            width: 30px;
                            height: 30px;
                            border-radius: 50%;
                            overflow: hidden;
                            margin: 10px 18px 10px 15px;

                            img {
                                width: 100%;
                                height: 100%;
                            }
                        }

                        p {
                            font-weight: 550;
                            color: #414141;
                        }
                    }

                    

                }
                .item_content {
                        ul {
                            display: flex;
                            // justify-content: space-between;
                            flex-wrap: wrap;

                            li {
                                width: 30%;
                                margin: 0 5px;
                                background-color: #f8f8f8;
                                border-radius: 10px;
                                margin-bottom: 12px;
                                text-align: center;
                                font-size: 14px;
                                font-weight: 550;
                                padding: 12px 0;
                                color: #414141;
                            }
                        }
                    }

            }
        }
    }
}
</style>